<template>
    <scroll>
      <div class="oldPHDetail">
        <div class="imgbox" :style="{backgroundImage: `url('../../../static/img/oldPeopleHome.png')`}"></div>
        <section class="title">
          <p class="name">{{detailInfo.name}}</p>
          <p class="content">
            <span class="level">{{detailInfo.level}}</span>
            <span class="selectedNum">{{detailInfo.selectedNum}}选择</span>
          </p>
        </section>
        <ul class="detailInfo">
          <li>
            <div class="detailInfo-item">
              <img src="../../../static/img/located.png"/>
              <p><span>位置：</span><span>{{detailInfo.location}}</span></p>
            </div>
          </li>
          <li>
            <div class="detailInfo-item">
              <img src="../../../static/img/tel.png"/>
              <p><span>电话：</span><span style="color: #4da2f8">{{detailInfo.tel}}</span></p>
            </div>
          </li>
        </ul>
      </div>
    </scroll>
</template>

<script>
    import Scroll from "../../components/scroll/scroll";

    export default {
      components: {Scroll},
      name: "old-people-home-detial",
      props: {
        data: {
          type: Array,
          default: null
        }
      },
      data () {
        return {
          detailInfo: {}
        }
      },
      created () {
        this._initDetail()
      },
      methods: {
        _initDetail () {
          let id = this.$route.query.id
          this.data.forEach((item) => {
            if (item.id == id) {
              this.detailInfo = item
            }
          })
        }
      }
    }
</script>

<style scoped lang="scss">
  @import "../../common/sass/mixin";
  .oldPHDetail{
    position: absolute;
    z-index: 100;
    top: 90px;
    bottom: 0;
    width: 100%;
    background-color: $bc;
    overflow: hidden;
    .imgbox{
      padding-bottom: 50%;
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    .title{
      padding: 20px 30px;
      background-color: #ffffff;
      .name{
        @include font-dpr(28px);
        color: $fbc;
      }
      .content{
        display: flex;
        color: $fgc;
        @include font-dpr(24px);
        .level{
          flex: 1;
          color: $priceCor;
        }
      }
    }
    .detailInfo{
      margin-top: 20px;
      @include font-dpr(28px);
      background-color: #ffffff;
      li{
        line-height: 80px;
        border-bottom: 1px solid $borderCor;
        padding: 0 27px;
        color: #787878;
        .detailInfo-item{
          display: flex;
          align-items: center;
          img{
            height: 35px;
            width: 35px;
            margin-right: 14px;
          }
        }
        &:last-child{
          border: none;
        }
      }
    }
  }
</style>
